<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <page-tools>
        <!-- 使用组件 通过插槽传内容 -->
        <template #before>
          共x条数据
        </template>
        <template #after>
          <el-button type="danger" size="small" @click="onExport">员工导出</el-button>
          <el-button type="success" size="small" @click="$router.push('/import')">员工导入</el-button>
          <el-button type="primary" size="small" @click="showAddEmtDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <!--  列表中间内容  -->
      <el-card>
        <el-table :data="list" :border="true" :stripe="true" style="width: 100%">
          <el-table-column prop="index" label="序号" :sortable="true" width="50">
          </el-table-column>
          <el-table-column prop="username" label="姓名" :sortable="true">
          </el-table-column>
          <el-table-column prop="staffPhoto" label="头像" :sortable="true" width="130">
            <!-- 图片--作用域插槽显示 -->
            <template v-slot="{row}">
              <img
                :src="row.staffPhoto"
                v-imgerror="require('@/assets/common/head.jpg')"
                style="border-radius: 50%;width: 100px;height: 100px;padding: 10px;"
                @click="onShowQrDialog(row.staffPhoto)"
              ></template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" :sortable="true" width="130">
          </el-table-column>
          <el-table-column prop="workNumber" label="工号" :sortable="true">
          </el-table-column>
          <el-table-column prop="formOfEmployment" label="聘用形式" :sortable="true" width="130">
            <template v-slot="{row}">{{ row.formOfEmployment | formatHireType }}</template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" :sortable="true">
          </el-table-column>
          <el-table-column prop="timeOfEntry" label="入职时间" :sortable="true" width="130">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="状态" :sortable="true">
            <template v-slot="{row}">
              <el-switch
                v-model="row.enableState"
                disabled
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" :sortable="true" width="260" fixed="right">
            <template v-slot="{row}">
              <!-- 路径通过query传参 -->
              <el-button type="text" @click="$router.push('/employees/detail/'+row.id+'?username=zs&age=100')">查看
              </el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text">角色</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 15px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :total="page.total"
            @current-change="onCurrentChange"
          ></el-pagination>
        </el-row>
      </el-card>
    </div>
    <el-dialog
      title="头像预览"
      :visible.sync="showQrDialog"
      width="50%"
    >
      <el-row type="flex" justify="center">
        <QrcodeVue :value="staffPhoto" :size="250" level="H"></QrcodeVue>
      </el-row>
    </el-dialog>
    <add-emp :showDialog.sync="showAddEmtDialog" @success="getEmployeeList"></add-emp>
  </div>
</template>

<script>
import { getEmployeeList } from '@/api/employees.js'
import QrcodeVue from 'qrcode.vue'
import AddEmp from '@/views/employees/components/add-emp'
import { pick } from 'lodash'
import { formatHireType, formatTime } from '@/utils/filters'

export default {
  name: 'EmployeesIndex',
  components: {
    AddEmp,
    QrcodeVue
  },
  data() {
    return {
      list: [], // 数据和分页方法
      page: { // 定义分页信息
        page: 1,
        size: 2,
        total: 0
      },
      // 定义对话框显示变量和存储头像地址
      showQrDialog: false,
      staffPhoto: undefined,
      showAddEmtDialog: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() { // 定义方法
      const { rows, total } = await getEmployeeList(this.page)
      this.list = rows
      this.page.total = total
    },
    onCurrentChange(val) {
      // 实现分页功能
      this.page.page = val
      this.getEmployeeList()
    },
    onShowQrDialog(staffPhoto) { // 保存图片路径
      this.staffPhoto = staffPhoto
      this.showQrDialog = true
    },
    onExport() {
      // 获取所有用户的数据
      import('@/vendor/Export2Excel').then(async excel => {
        const { rows } = await getEmployeeList({
          page: 1,
          size: this.page.total
        })
        console.log('rows', rows)
        // 表头对应关系
        const headers = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        const data = rows.map(t => {
          const item = pick(t, Object.values(headers))
          // 对特殊列做格式化
          item.timeOfEntry = formatTime(item.timeOfEntry)
          item.correctionTime = item.correctionTime ? formatTime(item.correctionTime) : ''
          item.formOfEmployment = formatHireType(item.formOfEmployment)
          return Object.values(item)
        })
        excel.export_json_to_excel({
          header: Object.keys(headers), // 表头必填
          data, // 具体数据 必填
          filename: 'excel-list',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
